<template>
	<view class="grace-upload-shade" @touchmove.stop.prevent="stopFun" :class="{'grace-upload-shade-hide':!shadeShow}">
		<!-- :style="{height:shadeShow?'100vh':'0px'}" -->
		<view :class="[showInReal ? 'grace-shade-in' : 'grace-shade-out','grace-upload-box']">
			<view class="grace-upload-box2">
				<image class="grace-upload-box-img" src="../../static/upload/upBg.png" mode=""></image>
				<view class="grace-upload-boxTop">
					<!-- <image class="grace-upload-boxTop-img" src="../../static/upload/huoxing.png"></image> -->
					<text class="gui-icons grace-upload-boxTop-text" @tap.stop="hideNow">&#xe632;</text>
				</view>
				<view class="grace-upload-boxMiddle">
					<view class="boxMiddle-title">新功能上线啦</view>
					<view class="boxMiddle-text" v-for="(item,index) in bugList.split('@')" v-if="index<6">
						{{index+1}}、{{item}}
					</view>
				</view>
				<view class="grace-upload-boxBtn" @tap.stop="goUpload"
					:class="[progress > 0 && progress < 100 ? 'ganimate' : '']">
					<text
						class="grace-upload-boxBtn-text">{{(progress > 0 && progress < 100) ? progressText +' '+ progress + '%' : buttonText}}</text>
				</view>
				<view class="race-upload-box-pro" v-if="progress > 0 && progress < 100">
					<text class="race-upload-box-pro-text">v{{version}} ➡ v{{newVersion}}</text>
					<text class="race-upload-box-pro-text">{{'('+sum1+'/'+sum2+')'}}</text>
				</view>
				<view class="grace-upload-boxBottom">
					<image class="grace-upload-boxBottom-img" src="../../static/upload/upbStar.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/js/http/'
	export default {
		name: "graceUpload",
		props: {
			uploadServerUrl: {
				type: String,
				default: ''
			},
			isHomePage: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				shadeShow: false, //组件是否展示
				showInReal: false, //中间内容动画
				progress: 0, //进程
				isUpdate: true, //是否更新
				buttonText: "立即更新", //按钮标题
				progressText: '正在更新',
				bytesLength: '', //下载数据长度
				bytesTotalLength: '', //需要下载总长度
				version: '', //当前版本号
				newVersion: '', //新版本号
				downUrl: '',
				bugList: '优化内容，提升用户体验', //更新内容
			}
		},
		computed: {
			sum1: function() {
				return (this.bytesLength / (1024 * 1024)).toFixed(2) + "MB";
			},
			sum2: function() {
				return (this.bytesTotalLength / (1024 * 1024)).toFixed(2) + "MB";
			}
		},
		methods: {
			goUpload() { //按钮点击事件
				/* 	if (plus.os.name == "Android") {
						plus.runtime.openURL(res.data.pkgUrl);
					} else {
						console.log("ios去商店");
						//app后面可以写上你们软件的拼音~ id可以在苹果商店中分享软件链接中有~
						// id替换成你们自己应用的id
						plus.runtime.launchApplication({
							action: '' https://itunes.apple.com/cn/app/..../id....
						}, function(e) {
							console.log('Open system default browser failed: ' + e.message);
						}); */
				console.log(this.downUrl);
				if (this.progress == 0) {
					const downloadTask = uni.downloadFile({
						url: this.downUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								this.progress = 100;
								this.buttonText = '下载完成';
								// this.fileUrl = res.tempFilePath;
								plus.runtime.install(res.tempFilePath, {
									force: false
								}, function() {
									console.log('安装成功...');
									plus.runtime.restart();
								}, function(e) {
									console.error(e);
									console.error('安装失败...');
								});
							}
						}
					});
					downloadTask.onProgressUpdate((res) => {
						console.log(res);
						console.log('下载进度' + res.progress);
						console.log('已经下载的数据长度' + res.totalBytesWritten);
						console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
						this.bytesLength = res.totalBytesWritten;
						this.bytesTotalLength = res.totalBytesExpectedToWrite;
						this.progress = res.progress;
					});
				}
				// 下载完成后
				else if (this.progress == 100) {

				}
			},
			stopFun: function() {}, //防止弹窗下面的内容滚动
			compare(curV, reqV) {
				if (curV && reqV) {
					//将两个版本号拆成数字
					var arr1 = curV.split('.'),
						arr2 = reqV.split('.');
					var minLength = Math.min(arr1.length, arr2.length),
						position = 0,
						diff = 0;
					//依次比较版本号每一位大小，当对比得出结果后跳出循环（后文有简单介绍）
					while (position < minLength && ((diff = parseInt(arr1[position]) - parseInt(arr2[position])) == 0)) {
						position++;
					}
					diff = (diff != 0) ? diff : (arr1.length - arr2.length);
					//若curV大于reqV，则返回true
					return diff > 0;
				} else {
					//输入为空
					console.log("版本号不能为空");
					return false;
				}
			},
			showNow: function() { //显示弹窗
				// #ifdef APP-PLUS
				let _self = this
				plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
					_self.version = wgtinfo.version;
					console.log(_self.uploadServerUrl);
					$http.get(`${_self.uploadServerUrl}`).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.hideLoading();
							if (plus.os.name == "Android") {
								let isUpdate = _self.compare(res.data.AndroidVersion, _self.version);
								console.log(isUpdate);
								if (isUpdate) {
									_self.shadeShow = true;
									setTimeout(() => {
										_self.showInReal = true;
									}, 10);
									_self.newVersion = res.data.AndroidVersion
									_self.downUrl = res.data.AndroidUpdateUrl
									if (res.data.content) {
										_self.bugList = res.data.content
									} else {
										_self.bugList = '优化用户体验，解决部分程序问题！'
									}
									console.log(_self.version);
									console.log(res.data.AndroidVersion);
									console.log(res.data.AndroidUpdateUrl);
								} else {
									if (!_self.isHomePage) {
										uni.showToast({
											icon: 'none',
											title: '您当前已经是最新版本了。'
										})
									}
								}
							} else {
								let isUpdate2 = _self.compare(res.data.IOSVersion, _self.version);
								if (isUpdate2) {
									console.log(res.data.IOSVersion);
									console.log(res.data.IOSUpdateUrl);
									plus.runtime.openURL(res.data.IOSUpdateUrl);
								} else {
									if (!_self.isHomePage) {
										uni.showToast({
											icon: 'none',
											title: '您当前已经是最新版本了。'
										})
									}
								}
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})

				});
				// #endif
			},
			hideNow: function() { //隐藏弹窗
				this.showInReal = false;
				setTimeout(() => {
					this.shadeShow = false;
				}, 150);
			}
		}
	}
</script>

<style scoped>
	.grace-upload-shade {
		background: rgba(0, 0, 0, .7);
		position: fixed;
		/* width: 100vw;
		height: 100vh; */
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.grace-upload-shade-hide {
		position: relative;
		width: 0;
		height: 0;
	}

	.grace-upload-box {
		width: 600rpx;
	}

	.grace-upload-box2 {
		position: relative;
		border-radius: 12px;
		width: 600rpx;
		min-height: 720rpx;
		padding-bottom: 30rpx;
	}

	.grace-upload-box-img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.grace-upload-boxTop {
		text-align: center;
		padding: 20rpx 30rpx 0 30rpx;
		position: relative;
		height: 200rpx;
	}

	.grace-upload-boxTop-text {
		font-size: 40rpx;
		color: #FFFFFF;
		position: absolute;
		right: 30rpx;
	}

	.grace-upload-boxTop-img {
		width: 250rpx;
		height: 272rpx;
		position: absolute;
		top: -85rpx;
		left: 140rpx;
	}

	.grace-upload-boxMiddle {
		padding: 0 30rpx 0 30rpx;
		min-height: 310rpx;
	}

	.boxMiddle-title {
		font-size: 36rpx;
		text-align: center;
		padding-bottom: 30rpx;
		letter-spacing: 1px;
	}

	.boxMiddle-text {
		padding: 10rpx 0;
		font-size: 28rpx;
	}

	.grace-upload-boxBtn {
		position: relative;
		font-size: 30rpx;
		line-height: 3;
		margin: 50rpx 50rpx 0 50rpx;
		border-radius: 30px;
		height: 80rpx;
	}

	.grace-upload-boxBtn-text {
		text-align: center;
		background: #4992D1;
		color: #FFFFFF;
		line-height: 80rpx;
		border-radius: 50rpx;
	}

	.race-upload-box-pro {
		margin: 20rpx 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.race-upload-box-pro-text {
		color: #B2B2B2;
		font-size: 26rpx;
	}

	@keyframes gradientBG {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.8;
		}

		80% {
			opacity: 1;
		}
	}

	.ganimate {
		animation: gradientBG 1.5s linear infinite;
	}

	.grace-upload-boxBottom-img {
		width: 70rpx;
		height: 72rpx;
		position: absolute;
		right: 80rpx;
		bottom: -80rpx;
	}

	.grace-shade-in {
		animation: grace-shade-in-a 150ms ease-in forwards;
	}

	@keyframes grace-shade-in-a {
		0% {
			transform: scale(0.1);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.grace-shade-out {
		animation: grace-shade-out-a 150ms ease-out forwards;
	}

	@keyframes grace-shade-out-a {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		100% {
			transform: scale(0.1);
			opacity: 0;
		}
	}
</style>
